<template>
	<view class="cum_container">
		<view class="navbar-box"
			:style="[{'transition':transition,'background':bgColor,'z-index':zIndex?zIndex:'','position':fixed?'fixed':'static'}]">
			<!-- 状态栏 -->
			<view :style="[{'min-height':statusBarHeight + 'px'}]"></view>
			<view :style="[{'min-height':navBarHeight+'px'}]" class="nav-container">
				<view v-if="left && (back || close)" class="nav-box" @click.stop="backPage">
					<image
						:src="'/static/common/'+[close?'close.png': (reverse ? 'top_bar_left_arrow_large.png':'top_bar_left_arrowblack_large.png')]"
						mode="scaleToFill"></image>
				</view>
				<view class="nav-all" :class="[{'left':leftAll,'right':rightAll}]">
					<slot name="all">
						<image class="home margin-left-sm"
							:src="`/static/index/main_icon_${reverse? 'white': 'black'}_home.png`" mode="aspectFit"
							@click="$Router.pushTab({name:'index'})">
							<image class="online"
								:src="`/static/index/main_icon_${reverse? 'white': 'gray'}_online_service.png`"
								mode="aspectFit"></image>
					</slot>
				</view>
				<view v-if="right && (back || close || move)" class="nav-box" @click.stop="backPage">
					<image
						:src="'/static/common/'+[close?'close.png':move?'ccb_web_more_white.png':(reverse ? 'acc_back_btn.webp':'back.png')]"
						:class="{'move-icon': move}" mode="scaleToFill"></image>
				</view>
				<view class="nav-content" :class="{'reverse':reverse}">
					<slot name="default"></slot>
				</view>
			</view>
		</view>
		<view v-if="fixed" :style="[{'min-height':(statusBarHeight+navBarHeight) + 'px'}]"></view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: '#F8F8F8'
			},
			close: {
				type: Boolean,
				default: false
			},
			move: {
				type: Boolean,
				default: true
			},
			back: {
				type: Boolean,
				default: true
			},
			right: {
				type: Boolean,
				default: false
			},
			left: {
				type: Boolean,
				default: true
			},
			rightAll: {
				type: Boolean,
				default: false
			},
			leftAll: {
				type: Boolean,
				default: false
			},
			reverse: {
				type: Boolean,
				default: false
			},
			status_reverse: {
				type: Boolean,
				default: false
			},
			zIndex: {
				type: String | Number,
				default: 0
			},
			fixed: {
				type: Boolean,
				default: true
			},
			transition: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				statusBarHeight: this.$StatusBarHeight,
				navBarHeight: 48,
				windowWidth: 375,
			};
		},
		watch: {
			status_reverse(val) {
				this.changeNavigationBarColor();
			}
		},
		mounted() {
			this.statusBarHeight = this.$StatusBarHeight;
			this.navBarHeight = this.$NavBarHeight;
			this.windowWidth = this.$windowWidth;
			this.changeNavigationBarColor();
			// if(this.status_reverse){
			// 	uni.setNavigationBarColor({
			// 		frontColor:"#ffffff",
			// 		backgroundColor:this.bgColor
			// 	})
			// }else{
			// 	uni.setNavigationBarColor({
			// 		frontColor:"#000000",
			// 		backgroundColor:this.bgColor
			// 	})
			// }
		},
		methods: {
			backPage() {
				if (this.$Route.query.isShare) {
					this.$Router.pushTab({
						name: 'index'
					});
				} else {
					this.$Router.back(1);
				}
			},
			changeNavigationBarColor() {
				uni.setNavigationBarColor({
					frontColor: this.status_reverse ? '#ffffff' : '#000000',
					backgroundColor: this.bgColor,
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.cum_container {
		width: 100%;

		.navbar-box {
			width: 100%;
			background-color: $color-ffffff;
			position: fixed;
			top: 0;
			z-index: 9999;

			.nav-container {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 44rpx;
					height: 44rpx;
					vertical-align: middle;
				}

				.move-icon {
					width: 72rpx;
					height: 72rpx;
				}

				.nav-content {
					position: absolute;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36rpx;
					color: $color-333333;

					&.reverse {
						color: $color-ffffff;
					}

					font-weight: 500;
				}

				.nav-box {
					// border: 1px solid red;
					width: 100rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.nav-all {
					// border: 1px solid red;
					margin: 0 32rpx;
					flex: 1;

					&.left {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					&.right {
						display: flex;
						flex-direction: row-reverse;
						align-items: center;
					}

					.online {
						width: 40rpx;
						height: 40rpx;
					}

					.home {
						width: 45rpx;
						height: 45rpx;
					}
				}

			}

		}
	}
</style>
